<ng-container *ngIf="tagData">
  <ng-container *ngIf="useSiftComponent===false; else siftComponentTemplate">
    <div class="nav" id="sift-home" [ngStyle]="siftHomeCssStyle | styleFilter">
      <ul class="clearfix siftList" [ngStyle]="siftListCssStyle | styleFilter">
        <ng-container *ngFor="let item of siftArr;let k = index;">
          <ng-container *ngIf="item.link!==undefined; else notCustomStyleTemplate">
            <li class="fl" [ngClass]="{'active':item.active}" appDebounceClick (debounceClick)="siftEventForNewStyle(item)"
              [ngStyle]="item.link?.params?.singleliBoxCssStyle|styleFilter">
              <div class="semicircle-box 0" [ngStyle]="item.link?.params?.singleDivBoxCssStyle|styleFilter">
                <span class="sift-title"
                  [ngStyle]="item.link?.params?.singleTitleCssStyle|styleFilter">{{item.title}}</span>
                <i class="icon icon-down"></i>
              </div>
            </li>
          </ng-container>
          <ng-template #notCustomStyleTemplate>
            <ng-container *ngIf="item.cssStyle!=='new_semicircle'&&item.cssStyle!=='semicircle'">
              <li class="fl" [ngClass]="{'active':item.active}" appDebounceClick (debounceClick)="siftEventForNewStyle(item)"
                [ngStyle]="item.cssStyle|styleFilter">
                <div class="semicircle-box 1">
                  <span class="sift-title">{{item.title}}</span>
                  <i class="icon icon-down"></i>
                </div>
              </li>
            </ng-container>
            <ng-container *ngIf="item.cssStyle==='new_semicircle'||item.cssStyle==='semicircle'">
              <li class="fl" [ngClass]="{'active':item.active}" appDebounceClick (debounceClick)="siftEventForNewStyle(item)"
                [ngStyle]="{'width': 100/siftArr.length+'%'}">
                <div class="semicircle-box 2">
                  <span class="sift-title">{{item.title}}</span>
                  <i class="icon icon-down"></i>
                </div>
              </li>
            </ng-container>
            <ng-container *ngIf="!item.cssStyle">
              <li class="fl" [ngClass]="{'active':item.active}" appDebounceClick (debounceClick)="siftEventForNewStyle(item)"
                [ngStyle]="{'width': 100/siftArr.length+'%'}">
                <div class="semicircle-box 3">
                  <span class="sift-title">{{item.title}}</span>
                  <i class="icon icon-down"></i>
                </div>
              </li>
            </ng-container>
          </ng-template>
        </ng-container>
      </ul>
    </div>
  </ng-container>
  <ng-template #siftComponentTemplate>
    <app-sift [tagData]="tagData"></app-sift>
  </ng-template>
</ng-container>